<template>
  <div class="wrap flex justify-between">
    <div class="video">
      <img :src="videoObj.src">
    </div>
    <div class="text">
      <h3 class="title font-lg font-bolder">{{ videoObj.title }}</h3>
      <div class="person font" v-html="videoObj.person"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  videoObj: {
    type: Object,
    default: {},
  },
});
</script>

<style scoped>
.wrap{
  margin:150px auto 110px;
}
.video {
  width: 806px;
  height: 454px;
  background: #ffffff;
  border: 4px solid #000000;
  box-shadow: 0px 9px 22px 2px rgba(98, 102, 117, 0.35);
  border-radius: 12px;
}
.text {
  padding-top:70px;
  width: 552px;
}
.title {
  width: 315px;
  line-height: 38px;

  background: linear-gradient(0deg, #252086 0%, #e60012 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.person{
  margin-top:70px;
  line-height:22px;
}
.person>>> p{
  margin-bottom:40px;
}
img{
  width:800px;
}
</style>
